<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" ref="studentSearchForm" :model="studentSearch" class="demo-form-inline" @submit.native.prevent>

        <el-form-item label="学号" prop="sno">
            <el-input v-model="studentSearch.sno" placeholder="学号"></el-input>
        </el-form-item>

        <el-form-item label="学生姓名" prop="studentName">
            <el-input v-model="studentSearch.studentName" placeholder="学生姓名"></el-input>
        </el-form-item>

        <el-form-item label="学生班级" prop="studentClass">
            <el-select v-model="studentSearch.studentClass" placeholder="学生班级">
                <el-option label="计算机19-1" value="计算机19-1"></el-option>
                <el-option label="计算机19-2" value="计算机19-2"></el-option>
                <el-option label="物联网19-1" value="物联网19-1"></el-option>
                <el-option label="物联网19-2" value="物联网19-2"></el-option>
                <el-option label="电子19-1" value="电子19-1"></el-option>
                <el-option label="电子19-2" value="电子19-2"></el-option>
                <el-option label="通信19-1" value="通信19-1"></el-option>
                <el-option label="通信19-2" value="通信19-2"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="searchStudent" native-type="submit">查询学生</el-button>
            <el-button type="warning" @click="resetSearchStudent">重置</el-button>
        </el-form-item>

    </el-form>
    <!--按钮-->
    <el-row>
        <el-button type="danger" plain @click="deleteStudents">-批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisibleAdd = true">+新增学生</el-button>
        <el-button type="primary" plain @click="dialogVisibleMoreAdd = true">+批量新增学生</el-button>
    </el-row>

    <!--  添加学生弹窗  -->
    <el-dialog
            title="添加学生信息"
            :visible.sync="dialogVisibleAdd"
            width="40%"
            @close="student = {}"
    >

        <el-form ref="addStudentForm" :model="student" label-width="80px">
            <el-form-item label="学号">
                <el-input v-model="student.sno" placeholder="例:'20190001'"
                          maxlength="12" show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="学生姓名">
                <el-input v-model="student.studentName"></el-input>
            </el-form-item>

            <el-form-item label="学生班级">
                <el-select v-model="student.studentClass" placeholder="请选择学生班级">
                    <el-option label="计算机19-1" value="计算机19-1"></el-option>
                    <el-option label="计算机19-2" value="计算机19-2"></el-option>
                    <el-option label="物联网19-1" value="物联网19-1"></el-option>
                    <el-option label="物联网19-2" value="物联网19-2"></el-option>
                    <el-option label="电子19-1" value="电子19-1"></el-option>
                    <el-option label="电子19-2" value="电子19-2"></el-option>
                    <el-option label="通信19-1" value="通信19-1"></el-option>
                    <el-option label="通信19-2" value="通信19-2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学生性别">
                <el-select v-model="student.studentSex" placeholder="请选择学生性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <div style="text-align: center;color: red">注：学生初始密码为123456</div>
            <br>
            <el-form-item>
                <el-button type="primary" @click="addStudent();dialogVisibleAdd = false">提交</el-button>
                <el-button type="success" @click="addStudent()">保存并继续添加学生</el-button>
                <el-button @click="dialogVisibleAdd = false" >取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <!--  批量添加学生弹窗  -->
    <el-dialog
            title="批量添加学生信息"
            :visible.sync="dialogVisibleMoreAdd"
            width="40%"
    >
        <el-upload
                class="upload-demo"
                ref="upload"
                action="/student/excelExport"
                accept=".xlsx,.xls"
                limit="1"
                :before-upload="beforeAvatarUpload"
                :on-success="successUpload"
                :on-error="errorUpload"
                :file-list="fileList"
                :auto-upload="false"
        >
            <el-button slot="trigger" type="primary">选取文件</el-button>
            <el-button style="margin-left: 200px;" type="success" @click="submitUpload">批量添加</el-button>
            <div slot="tip" style="color: red;font-size: 16px" class="el-upload__tip">
                一次只能上传一个Excel文件(.xls/.xlsx)，且大小不超过2MB
            </div>
        </el-upload>
    </el-dialog>

    <!--  修改学生弹窗  -->
    <el-dialog
            title="修改学生信息"
            :visible.sync="dialogVisibleUpdate"
            width="40%"
            @close="student = {}">

        <el-form ref="updateStudentForm" :model="student" label-width="80px">
            <el-form-item label="学号">
                <el-input v-model="student.sno" placeholder="例:'20190001'"
                          maxlength="12" show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="学生姓名">
                <el-input v-model="student.studentName"></el-input>
            </el-form-item>

            <el-form-item label="学生班级">
                <el-select v-model="student.studentClass" placeholder="请选择学生班级">
                    <el-option label="计算机19-1" value="计算机19-1"></el-option>
                    <el-option label="计算机19-2" value="计算机19-2"></el-option>
                    <el-option label="物联网19-1" value="物联网19-1"></el-option>
                    <el-option label="物联网19-2" value="物联网19-2"></el-option>
                    <el-option label="电子19-1" value="电子19-1"></el-option>
                    <el-option label="电子19-2" value="电子19-2"></el-option>
                    <el-option label="通信19-1" value="通信19-1"></el-option>
                    <el-option label="通信19-2" value="通信19-2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学生性别">
                <el-select v-model="student.studentSex" placeholder="请选择学生性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>

            <div style="text-align: center;"><el-button type="danger" @click="resetPassword">重置密码</el-button></div>
            <div style="text-align: center;color: red">密码重置为：123456</div>
            <br>
            <el-form-item>
                <el-button type="primary" @click="updateStudent">提交</el-button>
                <el-button @click="dialogVisibleUpdate = false;">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <br>
    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                border
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55"
                    align="center">
            </el-table-column>

            <el-table-column
                    prop="sno"
                    label="学号"
                    align="center"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    prop="studentName"
                    label="学生姓名"
                    align="center"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    prop="studentClass"
                    label="学生班级"
                    align="center"
                    sortable
            >
            </el-table-column>
            <el-table-column
                    prop="studentSex"
                    label="学生性别"
                    align="center"
                    sortable
            >
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">

                <template slot-scope="scope">
                    <el-button type="primary" @click="selectStudentById(scope.row)">修改</el-button>
                    <el-button type="danger" @click="deleteStudent(scope.row)">删除</el-button>
                </template>

            </el-table-column>

        </el-table>
        <!--分页工具条-->
        <el-pagination
                class="pageList"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                :current-page.sync="currentPage"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        >
        </el-pagination>
    </template>
    <br>
</div>

<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>

<script>
    //关闭控制台vue的提示
    Vue.config.productionTip = false;
    new Vue({
        el: "#app",
        //页面使用到的数据
        data() {
            return {
                //使用搜索的标志(默认关闭,在搜索一次后开启)
                searchFlag: 0,
                // 每页显示的条数
                pageSize: 10,
                // 总记录数
                totalCount: 0,
                // 当前页码
                currentPage: 1,
                // 添加数据对话框是否展示的标记
                dialogVisibleAdd: false,
                //批量添加学生
                dialogVisibleMoreAdd: false,
                //修改数据对话框
                dialogVisibleUpdate: false,
                //页面信息
                userInfo: {},
                // 学生模型数据
                student: {
                    id: '',
                    sno: '',
                    studentName: '',
                    studentClass: '',
                    studentSex: '',
                    studentPassword: ''
                },
                //学生搜索数据模型
                studentSearch: {
                    sno: '',
                    studentName: '',
                    studentClass: ''
                },
                // 被选中的id数组
                selectedIds: [],
                // 复选框选中数据集合
                multipleSelection: [],
                //上传文件的模型
                fileList: {
                    name: '',
                    url: ''
                },
                // 表格数据(静态数据)
                tableData: [
                    {
                        id: '1',
                        sno: '1',
                        studentName: '1',
                        studentClass: '1',
                        studentSex: '1'
                    },
                    {
                        id: '2',
                        sno: '2',
                        studentName: '2',
                        studentClass: '2',
                        studentSex: '2'
                    }
                ],
            }
        },
        mounted() {
            //保存用户数据到当前页面
            const userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            this.selectAll();
        },
        methods: {
            // 查询所有学生数据并分页
            selectAll() {
                //如果使用过搜索功能，就将表格改成搜索的内容
                if (this.searchFlag === 1) {
                    this.searchStudent();
                } else {
                    axios({
                        method: "get",
                        url: "/student/selectAll",
                        params: {
                            currentPage: this.currentPage,
                            pageSize: this.pageSize,
                        },
                    }).then(res => {
                        this.tableData = res.data.tableData || [];
                        this.totalCount = res.data.totalCount;
                    }).catch(() => {
                        this.$message({
                            message: '查询失败!已为您加载静态数据',
                            type: 'warning'
                        });
                    })
                }
            },

            //查询单个学生信息，回显信息到表单
            selectStudentById(val) {
                //弹窗修改信息
                this.student = val;
                //通过id来回显学生信息
                axios({
                    method: "get",
                    url: "/student/selectById/" + this.student.id
                }).then(res => {
                    this.student = res.data;
                    this.dialogVisibleUpdate = true;
                }).catch(() => {
                    this.$message({
                        message: '数据异常！',
                        type: 'warning'
                    });
                })
            },

            // 工具栏查询学生数据
            searchStudent() {
                axios({
                    method: "post",
                    url: "/student/selectByConditions",
                    data: this.studentSearch,
                    params: {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    this.tableData = res.data.tableData || [];
                    this.totalCount = res.data.totalCount;
                    this.searchFlag = 1;//搜索成功的标志
                }).catch(() => {
                    this.$message({
                        message: '数据异常！',
                        type: 'warning'
                    })
                })
            },

            //重置查询
            resetSearchStudent(){
                this.resetForm('studentSearchForm')
                this.searchFlag = 0
                this.selectAll()
            },

            //修改数据
            updateStudent() {
                axios({
                    method: "put",
                    url: "/student/update/" + this.student.id,
                    data: this.student,
                }).then(resp => {
                    if (resp.data) {
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });
                        this.dialogVisibleUpdate = false;
                        this.selectAll();
                    } else {
                        this.$message({
                            message: '数据异常，请检查数据再提交！',
                            type: 'warning'
                        });
                    }
                })
            },

            resetPassword(){
                axios({
                    method: "get",
                    url: "/student/resetPassword/" + this.student.id
                }).then(resp => {
                    if (resp.data) {
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: '数据异常，请检查数据再提交！',
                            type: 'warning'
                        });
                    }
                })
            },

            //添加学生
            addStudent() {
                if (this.student.studentName === '') {
                    this.$message({
                        message: '未填写数据',
                        type: 'warning'
                    });
                    return;
                }
                // 发送ajax请求，添加数据
                axios({
                    method: "post",
                    url: "/student/save",
                    data: this.student,
                }).then(() => {
                    //添加成功
                    // 重新查询数据
                    this.selectAll();
                    // 弹出消息提示
                    this.$message({
                        message: '恭喜你，添加成功',
                        type: 'success'
                    })
                }).catch(() => {
                    this.$message({
                        message: '未填写数据，已为你关闭窗口',
                        type: 'warning'
                    })
                })
                this.student = {};
            },

            //批量添加学生
            //Excel上传文件前处理
            beforeAvatarUpload(file) {
                console.log(file);
                const extension = file.name.split(".")[1] === "xls";
                const extension2 = file.name.split(".")[1] === "xlsx";
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!extension && !extension2) {
                    this.$message({
                        message: '上传文件只能是 xls、xlsx格式!',
                        type: 'error'
                    });
                }
                if (!isLt2M) {
                    this.$message({
                        message: '上传文件大小不能超过2MB!',
                        type: 'error'
                    });
                } else {
                    this.$message({
                        message: '添加成功！',
                        type: 'success'
                    });
                }
                return extension || extension2 || isLt2M;
            },
            //上传文件
            submitUpload() {
                this.$refs.upload.submit();
            },
            //上传成功后
            successUpload() {
                this.selectAll();
                this.dialogVisibleMoreAdd = false;
            },
            //上传失败
            errorUpload() {
                this.$message({
                    message: '内容错误或存在重复数据,请重新上传！',
                    type: 'warning'
                })
            },

            //删除学生数据
            deleteStudent(val) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.student = val;
                    axios({
                        method: "delete",
                        url: "/student/deleteById/" + this.student.id
                    }).then(() => {
                        this.selectAll();
                        this.student = {};
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                this.student = {};
            },

            //批量删除学生
            deleteStudents() {
                // 弹出确认提示框
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectionElement = this.multipleSelection[i];
                        this.selectedIds[i] = selectionElement.id;
                    }
                    // 发送ajax请求，删除数据
                    axios({
                        method: "post",
                        url: "/student/deleteByIds",
                        data: this.selectedIds
                    }).then(() => {
                        // 重新查询数据
                        this.selectAll();
                        // 弹出消息提示
                        this.$message({
                            message: '恭喜你，删除成功',
                            type: 'success'
                        });
                        this.selectedIds = []
                    }).catch(() => {
                        this.$message({
                            message: '出现异常',
                            type: 'warning'
                        });
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                this.selectedIds = []
            },

            //表格颜色，偶数绿色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            },

            // 复选框选中后执行的方法，
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //设置左侧每次显示多少条信息
            handleSizeChange(val) {
                // 重新设置每页显示的条数
                this.pageSize = val;
                this.selectAll();
            },

            //设置右侧跳转多少页
            handleCurrentChange(val) {
                // 重新设置当前页码
                this.currentPage = val;
                this.selectAll();
            },

            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>
</body>
</html>